<template>
  <Modal v-model="modal" :title="title">
    <div class="tag-modal">
      <Form :model="form" :label-width="80" ref="form" :rules="rules">
        <FormItem label="政策名称" prop="name">
          <Input :maxlength="20" v-model.trim="form.name" placeholder="请输入政策名称"/>
        </FormItem>
      </Form>
      <Table border :columns="columns" :data="listData"></Table>
      <div style="margin-top:10px">
        <Select v-model='selectModel' style="width:65%"> 
        <Option v-for='item in selectList' :value='item.id' :key="item.id">{{item.name}}</Option>
      </Select>
       <Button style="width:30%; margin-left:20px;" @click="addAgencyName" type="info" size="default">添加经销商</Button>
      </div>
      
    </div>
    <div slot="footer">
      <Button @click="modal = false" size="large" type="text">取消</Button>
      <Button :disabled="btnDisabled" @click="onSave" type="primary" size="large">确定</Button>
    </div>
  </Modal>
</template>
<script>
import table from "@/table";
import listData from "./BunchEditItemData";
export default {
  data() {
    const validateName = (rule, value, callback) => {
      if (value.trim() === "") {
        callback(new Error("请输入政策名称"));
      } else {
        if (value.length < 2) {
          callback(new Error("政策名称在2-8个字之间"));
        } else {
          if (this.oldName != value) {
            this.checkOnly().then(() => {
              if (this.flag) {
                callback(new Error("该政策名称已存在"));
              } else {
                callback();
              }
            });
          } else {
            callback();
          }
        }
      }
    };
    return {
      id: null,
      selectModel:'',
      modal: false,
      title: "新增政策",
      currentIndex: -1,
      btnDisabled: false,
      rules: {
        name: [{ required: true, validator: validateName, trigger: "blur" }]
      },
      selectList:[
        {
          id:1,
          name:'朝阳经销商'
        },
        {
          id:2,
          name:'下沙经销商'
        },
        {
          id:3,
          name:'北京经销商'
        }
      ],
      form: {
        name: ""
      },
      flag: false,
      oldName: null,
      ...listData
    };
  },
  mounted() {
    this.$bus.$on("delete", this.delete);
  },
  methods: {
    resetForm() {
      this.$refs.form.resetFields();
      this.form = {
        name: ""
      };
      this.oldName = "";
      this.currentIndex = -1;
      this.flag = false;
      this.btnDisabled = false;
      this.title = "新增政策";
    },
    updateForm(id) {
      this.resetForm();
      this.id = null;
      if (id) {
        this.getInfo(id);
        this.title = "编辑政策";
      } else {
        this.openModal();
      }
    },
    delete(row) {
      this.listData.splice(row.index, 1);
    },
    addAgencyName(){
      let data ={
        agencyName:'帅哥经销商哦',
        id:100
      }
      this.listData.push(data);
    },
    async checkOnly() {
      let param = {
        name: this.form.name
      };
      await this.$ajaxGet("/product/tag/exits/name", param).then(data => {
        this.flag = data;
      });
    },
    openModal() {
      this.modal = true;
    },
    closeModal() {
      this.modal = false;
    },
    getInfo(id) {
      this.id = id;
      this.$ajaxGet(`/supplier/role/detail/${this.id}`).then(data => {
        this.form.name = data.name;
        this.oldName = data.name;
        this.openModal();
      });
    },
    onSave() {
      if (this.btnDisabled) return;
      this.btnDisabled = true;
      this.$refs["form"].validate(valid => {
        if (valid) {
          let text = this.id ? "编辑" : "新增";
          let url = this.id ? "/supplier/role/modify" : "/supplier/role/add";
          let param = {
            name: this.form.name
          };
          if (this.id) param.id = this.id;
          this.$jsonPost(url, param)
            .then(data => {
              this.$Notice.success({
                title: `${text}成功`
              });
              this.$emit("complete");
              this.closeModal();
            })
            .catch(() => {
              this.btnDisabled = false;
            });
        } else {
          this.btnDisabled = false;
        }
      });
    }
  }
};
</script>

